<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F10350620210%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651232483&t=3d6c90b55a73e49364b78f621fc02f36");
      }
      tbody:hover {
        cursor: pointer;
      }
      tr:active {
        background-color: skyblue;
      }
      td {
        color: white;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="text" id="keywords" placeholder="搜索歌曲" value="" />

      <button id="send">搜索</button>
    </div>
    <div style="margin: 10px 0">
      <button class="btn btn-info content disable" id="prev">上一页</button>
      <button class="btn btn-info content disable" id="next">下一页</button>
    </div>

    <div>
      <audio id="player" src="" autoplay controls></audio>
    </div>

    <table class="table table-bordered">
      <thead>
        <td>音乐标题</td>
        <td>歌手</td>
        <td>专辑</td>
        <td>时长</td>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      let send = document.querySelector("#send");
      let keyword = document.querySelector("#keywords");
      let tbody = document.querySelector("tbody");
      let next = document.querySelector("#next");
      let prev = document.querySelector("#prev");
      let player = document.querySelector("#player");
      // let tr=document.querySelectorAll("tr")
      function ajaxTool(method, url, data, cb) {
        let xhr = new XMLHttpRequest();
        let a = "";
        for (const key in data) {
          a += `${key}=${data[key]}&`;
        }
        let newUrl = url + "?" + a.slice(0, -1);
        //切掉最后多出来的那个&
        xhr.open(method, newUrl);
        xhr.send();
        xhr.addEventListener("readystatechange", function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              cb(JSON.parse(xhr.responseText));
            }
          }
        });
      }
      let url = "http://netease.0melon0.cn/search";
      // let sum = 0;
      let data = {
        // keywords: keyword.value, //关键词，必选
        limit: 10,
        offset: 0,
      };
      let method = "GET";

      send.addEventListener("click", function () {
        data.offset = 0;
        tbody.innerHTML = "";
        data.keywords = keyword.value;
        ajaxTool(method, url, data, function (data) {
          data.result.songs.forEach((ele) => {
            tbody.innerHTML += `
                        <tr data_num=${ele.id}>
                          <td>${ele.name}</td>
                          <td>${ele.artists[0].name}</td>
                          <td>${ele.album.name}</td>
                          <td>${formateTime(ele.duration)}</td>
                        </tr>`;
          });
          let tr = document.querySelectorAll("tr");
          tbody.addEventListener("click", function (e) {
            let id = e.target.parentNode.getAttribute("data_num");
            player.src = `https://music.163.com/song/media/outer/url?id=${id}.mp3`;
          });
        });
      });
      next.addEventListener("click", function () {
        data.offset += 10;
        tbody.innerHTML = "";
        ajaxTool(method, url, data, function (data) {
          data.result.songs.forEach((ele) => {
            tbody.innerHTML += `
                        <tr data_num=${ele.id}>
                          <td>${ele.name}</td>
                          <td>${ele.artists[0].name}</td>
                          <td>${ele.album.name}</td>
                          <td>${formateTime(ele.duration)}</td>
                        </tr>`;
          });
        });
      });
      prev.addEventListener("click", function () {
        if (data.offset > 0) {
          data.offset -= 10;
          tbody.innerHTML = "";
          ajaxTool(method, url, data, function (data) {
            data.result.songs.forEach((ele) => {
              tbody.innerHTML += `
                        <tr data_num=${ele.id}>
                          <td>${ele.name}</td>
                          <td>${ele.artists[0].name}</td>
                          <td>${ele.album.name}</td>
                          <td>${formateTime(ele.duration)}</td>
                        </tr>`;
            });
          });
        }
      });

      function formateTime(num) {
        num /= 1000;
        let m = Math.floor(num / 60);
        let s = Math.floor(num % 60);
        s < 10 ? (s = "0" + s) : s;
        return m + ":" + s;
      }
    </script>
  </body>
</html>
